<template>
  <div id="app">
    <headers></headers>
    <keep-alive exclude="movieDetail">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
import headers from './components/layout/headers'
import navBar from './components/layout/navBar'
import sideBar from './components/layout/sideBar'
import movieList from './components/home/movieList'

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'App',
  data () {
    return {
      movieList: []
    }
  },
  computed: {
    ...mapGetters([
      'movies'
    ])
  },
  watch: {
    movies (val) {
      this.movieList = val
    }
  },
  mounted () {
    this.queryMovies().then(_ => {
      this.movieList = this.movies
    })
  },
  components: {
    navBar,
    sideBar,
    headers,
    movieList
  },
  methods: {
    ...mapActions([
      'queryMovies'
    ])
  }
}
</script>
<style lang="scss" scoped>
#app{
  background: #f4f7f6;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}
</style>